<template>
	<view>

		<tn-nav-bar>消息</tn-nav-bar>
		<view class="tabs-fixed tn-bg-white">
			<view class="tn-flex tn-flex-col-between tn-flex-col-center tn-padding-top-sm"
				:style="{marginTop: vuex_custom_bar_height + 'px'}">
				<view class="justify-content-item" style="width: 100vw;overflow: hidden;">
					<tn-tabs ref="msg" class="tabs" :list="tablist2" :isScroll="false" :current="tabsIndex"
						@change="tabsChange"></tn-tabs>
				</view>
			</view>
		</view>
		<view class="userlist">
			<view v-for="msg in list " :key="msg.id" @click="tn(`/discoveryPages/messagedetail?id=${msg.id}`)">
				<view class=" message_li">
					<view class="title">
						<view class="send">
							<template v-if="msg.lei==1">
								<view>系统</view>
								<view>消息</view>
							</template>
							<template v-if="msg.lei==2">
								<view>私信</view>
							</template>
						</view>
						<template v-if="allread">
							<view class="tag" v-if="!msg.sfread"></view>
						</template>


					</view>
					<view class="tn-padding-left-sm" style="width: 100%;">
						<view class="tn-flex tn-flex-row-between tn-flex-col-between">
							<view class="justify-content-item  tn-text-bold">
								<view class="tn-color-black" v-if="msg.lei==2">
									来自{{msg.fajian}}的消息
								</view>
								<view class="tn-color-black">
									{{msg.tit}}
								</view>
							</view>
						</view>
						<view class=" tn-padding-top-xs  tn-text-md ">
							<view class="content" style="-webkit-box-orient: vertical;">
								{{msg.comm}}
							</view>
						</view>
						<view class="date ">
							{{msg.fjtime}}
						</view>
						<template v-if="!allread">
							<view class="msgtags">
								<tn-tag v-if="!msg.sfread" backgroundColor="#ffaa00" fontColor="#fff"
									shape="radius">未全读</tn-tag>
								<tn-tag v-else backgroundColor="#00aa00" fontColor="#fff" shape="radius">已全读</tn-tag>
							</view>
						</template>
					</view>
				</view>
			</view>
			<bottom-btn v-if="allread" bottom="120" @save="save" subtext="全部已读" @submit="submit"></bottom-btn>
			<tn-empty v-if="!list.length" class="error" mode="data"></tn-empty>
		</view>

		<view class="tn-tabbar-height"></view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';

	export default {
		name: 'Message',
		data() {
			return {
				tablist: [{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '未读',
						// count: 10
					},
					{
						id: 2,
						name: '已读'
					},
				],
				tabsIndex: 0,
				list: [],
				page: 1,
			}
		},
		props: {
			currentIndex: {
				type: Number,
				default () {
					return 0;
				}
			},
		},
		computed: {
			allread() {
				return 1
			},
			tablist2() {
				return [{
						id: -1,
						name: '全部'
					},
					{
						id: 0,
						name: '未读',
					},
					{
						id: 1,
						name: '已读'
					},
				]

			},
			...mapState({
				userinfo: state => state.userinfo
			})
		},
		onShow() {
			let t = this;
			if (!t.userinfo) {
				t.$user.getInfo()
			}
		},
		watch: {
			currentIndex(nval, oval) {
				if (nval === 1) {
					this.page = 1
					this.getList();
					setTimeout(() => {
						this.$refs.msg.init()
					}, 100)
				}
			},
			tabsIndex(nval, oval) {
				console.log('oval', oval);
				console.log('nval', nval);
				this.getList();
				setTimeout(() => {
					this.$refs.msg.init()
				}, 100)
			}
		},

		methods: {
			onbottom() {
				this.getList();
			},
			submit() {
				let t = this;
				this.$t.message.loading('提交中');
				this.$request({
					url: this.$api.message.read,
					data: {
						id: 0
					}
				}).then(response => {
					t.$emit('loadindex')
					t.getList()
					this.$t.message.closeLoading();
					this.$t.message.toast(response.msg);

				}).catch((msg) => {
					this.$t.message.toast(msg);
					this.$t.message.closeLoading();
				});
			},
			// 标签栏值发生改变
			tabsChange(index) {
				this.tabsIndex = index
				this.page = 1
				// this.getList()
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			getList() {
				let t = this;
				this.$t.message.loading('加载中');
				// t.$emit('loadindex')
				this.$request({
					url: this.$api.message.list,
					method: 'post',
					data: {
						type: this.tablist[this.tabsIndex].id - 1,
						limit_page: t.page,
						limit_count: 20
					}
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						if (this.page !== 1) {
							this.list = this.list.concat(response.list);
						} else {
							this.list = response.list;
						}
						this.page = response.list.length ? this.page + 1 : this.page;
					} else {
						this.$t.message.toast(response.msg);
					}
				}).catch((msg) => {
					this.$t.message.toast(msg);
					this.$t.message.closeLoading();
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nobody {
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.userlist {
		min-height: 100vh;
	}

	.tn-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 36rpx;
		position: absolute;
		width: 100vw;

		&__icon {
			margin-top: 14rpx;
			color: #999;
			font-size: 90rpx;
		}

		&__image {
			width: 400rpx;
			height: 400rpx;
			// 小程序特有的样式
			/* #ifdef MP */
			margin-top: 18vh;
			/* #endif */

			// H5特有的样式
			/* #ifdef H5 */
			margin-top: 17vh;
			/* #endif */
		}

		&__text {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			color: #AAAAAA;
			font-size: 30rpx;
			width: 420rpx;
			text-align: center;
		}

		&__slot {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
		}
	}

	.message_li {
		display: flex;
		padding: 20rpx;
		position: relative;
		margin: 5rpx 0;
		background-color: #fff;

		.title {
			position: relative;
		}

		.date {
			color: rgba(0, 0, 0, 0.4);
			text-align: left;
			padding-top: 20rpx;
			font-size: 26rpx;
		}

		.content {
			color: rgba(0, 0, 0, 0.6);
			display: -webkit-box;
			overflow: hidden;
			white-space: normal !important;
			text-overflow: ellipsis;
			word-wrap: break-word;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}

	.msgtags {
		position: absolute;
		top: 8rpx;
		right: 20rpx;
	}



	/* 自定义导航栏内容 end */

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	.send {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: #2074d4;
		border-radius: 10rpx;
		color: #fff;
	}
</style>